<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <!-- PrimeVue -->
    <!-- <link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
        <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
        <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" /> -->

    <link href="../libs/primevue/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
    <link href="../libs/primevue/resources/primevue.min.css" rel="stylesheet" />
    <link href="../libs/primeflex/primeflex.min.css" rel="stylesheet" />
    <link href="../libs/primeicons/primeicons.css" rel="stylesheet" />

    <!-- Dependencies -->
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="../libs/vue/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/primevue@^3/core/core.min.js"></script> -->
    <script src="../libs/primevue/core/core.min.js"></script>

    <!-- Demo -->
    <!-- <script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"></script> -->
    <script src="../libs/primevue/calendar/calendar.min.js"></script>
  </head>
  <body>
    <div id="app">
      <h5>Popup</h5>
      <div class="p-fluid grid formgrid">
        <div class="field col-12 md:col-4">
          <label for="basic">Basic</label>
          <p-calendar id="basic" v-model="date1" autocomplete="off" @date-select="dateSelect($event)"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="dateformat">DateFormat</label>
          <p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="icon">Icon</label>
          <p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="minmax">MinMax</label>
          <p-calendar
            id="minmax"
            v-model="date4"
            :min-date="minDate"
            :max-date="maxDate"
            :manual-input="false"
          ></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="disableddays">Disabled Days</label>
          <p-calendar
            id="disableddays"
            v-model="date5"
            :disabled-dates="invalidDates"
            :disabled-days="[0,6]"
            :manual-input="false"
          ></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="multiple">Multiple</label>
          <p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="range">Range</label>
          <p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="buttonbar">Button Bar</label>
          <p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="time24">Time / 24h</label>
          <p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="time12">Time / 12h</label>
          <p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="monthpicker">Month Picker</label>
          <p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="yearpicker">Year Picker</label>
          <p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="multiplemonths">Multiple Months</label>
          <p-calendar
            id="multiplemonths"
            v-model="date11"
            :number-of-months="3"
            :responsive-options="responsiveOptions"
          ></p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="datetemplate">Date Template</label>
          <p-calendar id="datetemplate" v-model="date12">
            <template #date="slotProps">
              <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day"
                >{{slotProps.date.day}}</strong
              >
              <template v-else>{{slotProps.date.day}}</template>
            </template>
          </p-calendar>
        </div>
        <div class="field col-12 md:col-4">
          <label for="touchUI">TouchUI</label>
          <p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
        </div>
      </div>

      <h5>Inline</h5>
      <p-calendar v-model="date14" :inline="true" :show-week="true"></p-calendar>
    </div>

    <script type="module">
      const { createApp, ref, watch } = Vue;

      const App = {
        setup() {
          let today = new Date();
          let month = today.getMonth();
          let year = today.getFullYear();
          let prevMonth = month === 0 ? 11 : month - 1;
          let prevYear = prevMonth === 11 ? year - 1 : year;
          let nextMonth = month === 11 ? 0 : month + 1;
          let nextYear = nextMonth === 0 ? year + 1 : year;

          const minDate = ref(new Date());
          const maxDate = ref(new Date());
          const invalidDates = ref();
          const date1 = ref(new Date());
          const date2 = ref();
          const date3 = ref();
          const date4 = ref();
          const date5 = ref();
          const date6 = ref();
          const date7 = ref();
          const date8 = ref();
          const date9 = ref();
          const date10 = ref();
          const date11 = ref();
          const date12 = ref();
          const date13 = ref();
          const date14 = ref();
          const dates1 = ref();
          const dates2 = ref();
          const responsiveOptions = ref([
            {
              breakpoint: "1400px",
              numMonths: 2,
            },
            {
              breakpoint: "1200px",
              numMonths: 1,
            },
          ]);

          minDate.value.setMonth(prevMonth);
          minDate.value.setFullYear(prevYear);
          maxDate.value.setMonth(nextMonth);
          maxDate.value.setFullYear(nextYear);

          let invalidDate = new Date();
          invalidDate.setDate(today.getDate() - 1);
          invalidDates.value = [today, invalidDate];

          watch(date1, (newValue, oldValue) => {
            console.log("date1 watch:", newValue, oldValue);
          });
          function dateSelect(value) {
            console.log("date1 selected:", value);
          }

          return {
            minDate,
            maxDate,
            invalidDates,
            date1,
            date2,
            date3,
            date4,
            date5,
            date6,
            date7,
            date8,
            date9,
            date10,
            date11,
            date12,
            date13,
            date14,
            dates1,
            dates2,
            responsiveOptions,
            dateSelect,
          };
        },
        components: {
          "p-calendar": primevue.calendar,
        },
      };

      createApp(App).use(primevue.config.default).mount("#app");
    </script>

    <style>
      .special-day {
        text-decoration: line-through;
      }
    </style>
  </body>
</html>
